<template>
  <div class="Header-main">
    <div class="Header-box">
      <a class="Header-logo" href="javascript:;">
        <img src="@/assets/image/logo.png" alt="" />
      </a>
      <ul class="Header-title">
        <li>
          <router-link
            data-index="0"
            @click="SwitchRoute"
            :class="[datasetIndex == 0 ? 'active' : '']"
            to="/home"
            >音乐馆</router-link
          >
        </li>
        <li>
          <router-link
            :class="[datasetIndex == 1 ? 'active' : '']"
            data-index="1"
            @click="SwitchRoute"
            to="/mymusic"
            >我的音乐</router-link
          >
        </li>
        <li><a data-index="2" href="javescript:;">客户端</a></li>
        <li><a data-index="3" href="javescript:;">开放平台</a></li>
        <li><a data-index="4" href="javescript:;">VIP</a></li>
      </ul>
      <div class="Header-box-input">
        <input
          class="Header-input"
          type="text"
          placeholder="搜索音乐 MV 歌单 用户"
        />
        <i
          href="javascript:;"
          style="cursor: pointer"
          class="iconfont icon-sousuo"
        ></i>
      </div>
      <a v-show="!UserInfo.userId" @click.prevent="goLogin" class="Header-login"
        >登录</a
      >
      <a v-show="UserInfo.userId" class="UserInfoBox">
        <span class="UserInfoName">{{ UserInfo.nickname }}</span>
        <img class="UserInfoImg" :src="UserInfo.avatarUrl" />
      </a>
      <div class="vip-box" @mouseenter="isShowVip" @mouseleave="isShowVip">
        <a class="vip" href="javascript:;">
          <i
            :class="[
              'iconfont',
              'arrows',
              vip ? 'icon-xiangshang1' : 'icon-xiangxia1',
            ]"
          ></i>
          开通VIP</a
        >
        <ul class="vip-ul" v-show="vip">
          <li>开通绿钻豪华版</li>
          <li>开通付费包</li>
        </ul>
      </div>
      <div
        class="recharge-box"
        @mouseenter="isShowMoney"
        @mouseleave="isShowMoney"
      >
        <a class="recharge" href="javascript:;">
          <i
            :class="[
              'iconfont',
              'arrows',
              Money ? 'icon-xiangshang1' : 'icon-xiangxia1',
            ]"
          ></i>
          充值</a
        >
        <ul class="recharge-ul" v-show="Money">
          <li>购买乐币</li>
          <li>充值饭票</li>
        </ul>
      </div>
    </div>
    <div class="Header-nav">
      <ul class="Header-nav-list">
        <li>
          <router-link
            @click="isShowAction"
            data-index="0"
            :class="HeardIndex === '0' ? 'active' : ''"
            to="/home"
            >首页</router-link
          >
        </li>
        <li>
          <router-link
            @click="isShowAction"
            data-index="1"
            :class="HeardIndex === '1' ? 'active' : ''"
            to="singer"
            >歌手</router-link
          >
        </li>
        <li>
          <router-link
            @click="isShowAction"
            data-index="2"
            :class="HeardIndex === '2' ? 'active' : ''"
            to="/dvd"
            >新碟</router-link
          >
        </li>
        <li>
          <router-link
            @click="isShowAction"
            data-index="3"
            :class="HeardIndex === '3' ? 'active' : ''"
            to="/ranking"
            >排行榜</router-link
          >
        </li>
        <li>
          <router-link
            @click="isShowAction"
            data-index="4"
            :class="HeardIndex === '4' ? 'active' : ''"
            to="/classified"
            >分类歌单</router-link
          >
        </li>
        <li>
          <router-link
            @click="isShowAction"
            data-index="5"
            :class="HeardIndex === '5' ? 'active' : ''"
            to="/radio"
            >电台</router-link
          >
        </li>
        <li>
          <router-link
            @click="isShowAction"
            data-index="6"
            :class="HeardIndex === '6' ? 'active' : ''"
            to="/mv"
            >MV</router-link
          >
        </li>
        <!-- <li><a href="javascript:;">数字专辑</a></li> -->
      </ul>
    </div>
  </div>
  <Mask :isShowLogin="isShowLogin" @isShowSwichLogin="isShowSwichLogin"></Mask>
</template>

<script>
export default {
  name: 'Heard',
}
</script>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserInfo } from '@/store/modules/userInfo'

const vip = ref(false)
const Money = ref(false)
const datasetIndex = ref(0)
const HeardIndex = ref('0')
const isShowLogin = ref(false)

const UserInfo = useUserInfo()
const isShowSwichLogin = isShow => {
  isShowLogin.value = isShow
}

const goLogin = () => {
  isShowLogin.value = true
}

const isShowVip = () => {
  vip.value = !vip.value
}
const isShowMoney = () => {
  Money.value = !Money.value
}

const SwitchRoute = e => {
  const { index } = e.target.dataset
  datasetIndex.value = index
}
const isShowAction = e => {
  HeardIndex.value = e.target.dataset.index
}
</script>

<style scoped lang="less">
.Header-main {
  width: 1200px;
  margin: 0 auto;
  font-size: 16px;
}
.Header-box {
  height: 90px;
  line-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  .Header-logo {
    display: flex;
    width: 170px;
    height: 46px;
    margin-right: 20px;
  }
  .Header-box-input {
    border: 1px solid #c9c9c9;
    line-height: 36px;
    height: 36px;
    position: relative;
    border-radius: 3px;
    background-color: #fff;
    transition: width 0.6s ease-out;

    .Header-input {
      width: 174px;
      height: 36px;
      border: 0;
      border-radius: 5px;
      font-size: 14px;
      background: transparent;
      transition: width 0.6s ease-out, visibility 0.6s ease-out 1ms;
      outline: none;
    }
  }
  .UserInfoBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    .UserInfoName {
      font-size: 12px;
    }
    .UserInfoImg {
      width: 50px;
      height: 50px;
    }
  }

  .Header-login {
    cursor: pointer;
    position: relative;
    font-size: 18px;
    float: left;
    width: 38px;
    margin: 0 20px;
    text-align: center;
    height: 90px;
    text-decoration: none;
    &:hover {
      color: #1ad76c;
    }
  }
}
.Header-title {
  display: flex;
  font-size: 18px;
  flex-grow: 1;
  li {
    width: 74px;
    text-align: center;
    flex: 1;
    a {
      text-decoration: none;
      color: #000;
      display: block;
      &:hover {
        color: #31c27c !important;
      }
    }
    .active {
      color: #fff;
      background-color: #31c27c;
      &:hover {
        color: #fff !important;
      }
    }
  }
}

//下拉框
.vip-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  line-height: 20px;
  height: 90px;
  width: 122px;
  font-size: 14px;
  .vip {
    background-color: #31c27c;
    color: #fff;
    border-color: #31c27c;
    display: block;
    line-height: 38px;
    padding: 0 15px 0 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    text-decoration: none;
    &:hover {
      color: #fff !important;
    }
    .arrows {
      position: absolute;
      right: 5px;
      top: 28%;
    }
  }
  .vip-ul {
    position: absolute;
    top: 64px;
    width: 122px;
    line-height: 40px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    li {
      border: 1px solid #c9c9c9;
      border-top: none;
    }
  }
}
.recharge-box {
  position: relative;
  width: 83px;
  margin-left: 10px;
  .recharge {
    display: block;
    line-height: 38px;
    padding: 0 15px 0 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    text-decoration: none;
    color: #000 !important;
    .arrows {
      position: absolute;
      right: 5px;
      top: 5%;
    }
  }
  .recharge-ul {
    position: absolute;
    top: 40px;
    width: 83px;
    line-height: 40px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    li {
      border: 1px solid #c9c9c9;
      border-top: none;
      &.active {
        color: #fff !important;
        background-color: #31c27c;
      }
    }
  }
}
// 路由导航
.Header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  .Header-nav-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    li {
      margin-right: 55px;
    }
    a {
      color: #000;
      text-decoration: none;
      &:hover {
        color: #31c27c !important;
      }
      &.active {
        color: #31c27c !important;
      }
    }
  }
}
</style>
